import React, { Component } from 'react'
import { Card, Form, Divider } from 'antd'
import BaseForm from '../../components/BaseForm'
import axios from './../../axios'

export default class BikeMap extends Component{
    state = {
        bikeInfo: {}
    }
    map = {}
    formList = [
        {
            type: '城市'
        },
        {
            type: '时间查询'
        },
        {
            type: 'SELECT',
            label: '订单状态',
            field: 'order_status',
            placeholder: '全部',
            initialValue: '0',
            list: [{id: '0', name: '全部'}]
        }
    ]

    componentWillMount() {
        this.requestList()
    }

    requestList = () => {
        axios.ajax({
            url: '/map/bike_list',
            data: {
                params: this.params   // 通过this存储 而不是通过state存储，是因为不需要在render中进行渲染
            }
        }).then(res => {
            if(res.code == 0) {
                this.setState({
                    total_count: res.result.total_count
                })
                this.renderMap(res)
            }
        })
    }

    handleFilterSubmit = (filterParams) => {
        this.params = filterParams
    }

    // 渲染地图数据
    renderMap = (res) => {
        let list = res.result.route_list
        this.map = new window.BMap.Map('container')   // 初始化一个map地图
        let gps1 = list[0].split(',')  // 坐标起点(左边经度， 右边纬度)
        let startPoint = new window.BMap.Point(gps1[0], gps1[1])
        let gps2 = list[list.length -1].split(',')  // 坐标终点
        let endPoint = new window.BMap.Point(gps2[0], gps2[1])
        this.map.centerAndZoom(endPoint, 11)  //  地图中的某一点放在地图的正中间，本图中把终点作为中心点
        
        /**
         * 绘制icon图标
         */
        let startPointIcon = new window.BMap.Icon('/assets/start_point.png', new window.BMap.Size(36,42), {
            imageSize: new window.BMap.Size(36, 42),
            anchor: new window.BMap.Size(18, 42)
        })
        // icon用在marker中， marker指的是地图的覆盖物
        let bikeMarkerStart = new window.BMap.Marker(startPoint, {
            icon: startPointIcon
        })
        // 初始化一个组件后需要通过addOverlay加载到地图上去
        this.map.addOverlay(bikeMarkerStart)

        let endPointIcon = new window.BMap.Icon('/assets/end_point.png', new window.BMap.Size(36,42), {
            imageSize: new window.BMap.Size(36, 42),
            anchor: new window.BMap.Size(18, 42)
        })
        let bikeMarkerEnd = new window.BMap.Marker(endPoint, {
            icon: endPointIcon
        })
        this.map.addOverlay(bikeMarkerEnd)

        /**
         * 绘制车辆行驶路线
         */
        let routeList = []
        list.forEach((item) => {
            let p = item.split(',')
            routeList.push(new window.BMap.Point(p[0], p[1]))  //  new window.BMap.Point百度地图的坐标系（经度，纬度）
        })
        // 根据坐标点绘制行驶路线图
        let polyLine = new window.BMap.Polyline(routeList, {
            strokeColor: '#ef4136',
            strokeWeight: 2,
            strokeOpacity: 1
        })
        this.map.addOverlay(polyLine)

        /**
         * 绘制服务区
         */
        let servicePointList = []
        let serviceList = res.result.service_list
        serviceList.forEach(item => {
            servicePointList.push(new window.BMap.Point(item.lon, item.lat))
        })
        let polyServiceLine = new window.BMap.Polyline(servicePointList, {
            strokeColor: '#ef4136',
            strokeWeight: 3,
            strokeOpacity: 1
        })
        this.map.addOverlay(polyServiceLine)

        /**
         * 添加地图中的自行车坐标
         */
        let bikeList = res.result.bike_list
        let bikeIcon = new window.BMap.Icon('/assets/bike.jpg', new window.BMap.Size(36, 42), {
            imageSize: new window.BMap.Size(36, 42),
            anchor: new window.BMap.Size(18, 42)
        })
        bikeList.forEach(item => {
            let p = item.split(',')
            let point = new window.BMap.Point(p[0], p[1])
            let bikeMarker = new window.BMap.Marker(point, {icon: bikeIcon})
            this.map.addOverlay(bikeMarker)
            
        })

    }

    render() {
        return (
            <div>
                <Card>
                    <BaseForm formList={this.formList} filterSubmit={this.handleFilterSubmit} />
                </Card>
                <Card style={{marginTop: 10}}>
                    <div>共{this.state.total_count}辆车</div>
                    <div id="container" style={{height: 500}}></div>
                </Card>
            </div>
        )
    }
}